<div style="display: flex;align-items: flex-start;margin: 10px 5px;">
    <ul class="navs clearfix bookName" >
        <li><span class="text-muted">书名：</span></li>
        {volist name="books" id="vo"}
            <li>
                <a href="{$currurl}?book_id={$vo.id}" 
                    {if $vo['id'] == $book_id} class="active"{/if}
                    {if $vo['sex'] == "女频"} style="color: #a94442;"{/if}
                >{$vo.name}</a>
            </li>
        {/volist}
    </ul>
    <div class="spread"> 
        <span style="display: inline;">展开</span>
        <div id="create_book_id"> <i class="fa fa-plus"></i> 添加</div>
    </div>
</div>

<script>
    $(function(){
    //展开功能
    var BN_height;
	if(GetQueryString('book_id')){
		$('.spread span').show()
		$('.bookName').animate({ height: $('.bookName').height()+2+"px" })
		$('.spread span').text('收回')
	}
	if ($('.bookName').height() > 20) {
		BN_height = $('.bookName').height()
		$('.bookName').height('20') 
		$('.spread span').show()
	}
	$('.spread span').click(function () {
		let status = $('.spread span').text().trim()
		if (status == '展开') {
				$('.bookName').animate({ height: BN_height+2+"px" })
				$('.spread span').text('收回')
		} else {
				$('.bookName').animate({ height: "22px" })
				$('.spread span').text('展开')
		}
	})
});
</script>
<div class="modal fade" id="create-book-referral-link-modal">
	<div class="modal-dialog" role="document">
	   <div class="modal-content">
		   <div class="modal-header">
			   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			   <span style="font-size: 20px;"><span id="referralname_book_id">增加</span></span>
		   </div>
		   <div class="modal-body">
			   <div data-bind="visible: loading" class="loading-panel" style="display: none;">
				   <i class="fa fa-spin fa-spinner"></i>
			   </div>
			   <form class="form-horizontal modelform2">
				   <input type="hidden" name="id" id="createspreadbook_id">
				 
				   <div class="form-group">
						<label class="control-label col-sm-3"><span class="required">*</span> 书名名称</label>
						<div class="col-sm-7">
							<input type="text" class="form-control" maxlength="100" name="title" id="title" placeholder="" >
						</div>
					</div>

					
					<!-- <input type="hidden" name="name" value="其它"> -->
					<div class="form-group">
                        <label class="control-label col-sm-3"><span class="required">*</span> 频道</label>
                        <div class="col-sm-7">
                            <label class="radio-inline">
                                <input type="radio" checked="true" name="name" id="name"  value="男频"/>
                                <span>男频</span>
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="name" value="女频"/>
                                <span>女频</span>
                            </label>
                            
                        </div>
                    </div>

					<div class="form-group">
						<label class="control-label col-sm-3"><span class="required">*</span> 排序</label>
						<div class="col-sm-7">
							<input type="text" class="form-control" maxlength="100" name="sort" id="sort" placeholder="" >
						</div>
					</div>

			   </form>
		   </div>
		   <div class="modal-footer">
			   <button type="button" id="createreferral_book_id" class="btn btn-primary ">提交</button>
		   </div>
	   </div>
   </div>
</div>
<script>

    $(function() {
	$('#create_book_id').on('click',function(){
		var $modal = $('#create-book-referral-link-modal');
		$modal.on('shown.bs.modal', function () {
		});	
		$modal.modal({backdrop: 'static', keyboard: false})
	});
	$("#createreferral_book_id").on('click',function(){
		var data = $('.modelform2').serializeJson();
		if (data['name'].length==0) {
			updateAlert("不能为空", 'danger');
			return false;
		}
		if (data['title'].length==0) {
			updateAlert("不能为空", 'danger');
			return false;
		}
		var url = "{:url('adsmaterialbook/add')}";
		$.ajax({
			type: "POST",
			url: url,
			data:data,
			dataType: "json",
			success: function(data){
				if(data.code==1){
					updateAlert(data.msg, 'success');
					setTimeout(function() {	
						window.location.reload();
					}, 1500);
				}else{
					updateAlert("添加，"+data.msg, 'danger');
				}
			},
			error : function(e){
				console.log(e.status);
				console.log(e.responseText);
			}
		})
	});
});
function editreferral_book_id(ee){
	var jsonStr = $(ee).attr('data-json');
	var $modal = $('#create-book-referral-link-modal');
	$modal.on('shown.bs.modal', function () {
		$("#referralname_book_id").html("修改");
		$("#createreferral_book_id").html("修改");
		var json =  eval("(" + jsonStr + ")");
		$('#createspreadbook_id').val(json.id);
		$('#title').val(json.title);
		$('#sort').val(json.sort);
		$("input:radio[name=name][value="+json.name+"]").attr("checked",true);
	});
	$modal.on('hide.bs.modal', function () {
		window.location.reload();
	})
	$modal.modal({backdrop: 'static', keyboard: false})
}
</script>